/**
 * 通过配置echarts的数据源，x轴y轴要展示的字段 便可实现动态设计图表功能 此处我们以线型图为例
 * 图表的自动渲染逻辑请参考magicalcoder.js
 * 开发思路：
   首先我们有一系列统计图表的接口，并且每个接口的字段都是已知的 这些可以让后端提供一个api.json接口返回
    {
      "code":0,
      "data":[
        {
          "url":"assets/drag/js/my/data/a.json",
          "title":"获取A接口数据",
          "fields":{
            "x":[{"name":"title","title":"名称"}],
            "y":[{"name":"age","title":"年龄"}]
          }
        },
        {
          "url":"assets/drag/js/my/data/b.json",
          "title":"获取B接口数据",
          "fields":{
            "x":[{"name":"desc","title":"名称"}],
            "y":[{"name":"x","title":"X轴"},{"name":"y","title":"Y轴"}]
          }
        },
        {
          "url":"assets/drag/js/my/data/c.json",
          "title":"获取C接口数据",
          "fields":{
            "x":[{"name":"name","title":"标签名称"}],
            "y":[{"name":"height","title":"高度"},{"name":"width","title":"宽度"}]
          }

        }
      ]
    }
    我们的目标就是把以上配置到echarts的属性中，让用户选择对应的数据源 还可以选择对应的字段，布局器会自动把这些内容加在html的属性上
    当调用iframe-ui.js中的render时，便进入new McEcharts().render()方法 此方法在ui/magicalcoder/1.1.0/magicalcoder.js
    进而便执行我们的初始化图表的脚本 ajax去后台请求数据 刷新到图表上
 */
function MyCallback(){
    //xy轴就可以解决问题的
    this.xyConfig = {
        "mc-echarts-line":{remoteApi:"assets/drag/js/data/echarts/xy/api.json"},
        "mc-echarts-bar":{remoteApi:"assets/drag/js/data/echarts/xy/api.json"},
        "mc-echarts-pie":{remoteApi:"assets/drag/js/data/echarts/xy/api.json"},
    }
    //
    this.scatter = {
        "mc-echarts-scatter":{remoteApi:"assets/drag/js/data/echarts/scatter/api.json"},
    }
 
}
//接口数据缓存 key:url value:字段
var API_CACHE={}

/**
 * 创建echarts 线形图数据源右侧下拉
 * @param api
 */
MyCallback.prototype.buildEchartsRemoteApi=function(apiUrl,identifier,api){
    //获取所有接口列表 这里是主界面 要用jquery的ajax请求方式
    $.getJSON(apiUrl,{date:new Date().getTime()},function (data) {
        //放到identifier的数据源属性上 我们需要拼接[{"下拉框值":"下拉框显示内容"}]
        var options = [];
        if(data.code==0){
            var list = data.data;
            for(var i=0;i<list.length;i++){
                var item = list[i];
                var map = {};
                map[item.url]=item.title;
                options.push(map);
                //暂存全局变量 便于切换数据源时搜索x y轴下拉
                API_CACHE[item.url]=item.fields;
            }
        }
        //到constant.js里查找identifier的attrName属性配置对象 修改它的options就可以达到注入我们的下拉值目的
        var lineConfig = api.getRightPanelItemListFromConstant({key:identifier,query:{attrName:"mc-attr-unknown-api"}});
        for(var i=0;i<lineConfig.length;i++){
            lineConfig[i].options=options;//只要赋值一下options
        }
    })
}

MyCallback.prototype.setXYOption = function(identifier,fieldsConfig,attrName){
    var api = new MagicalApi();
    //轴下拉
    var option = [];
    for(var i=0;i<fieldsConfig.length;i++){
        var map = {};
        var item = fieldsConfig[i];
        map[item.name] = item.title;
        option.push(map);
    }
    //到constant.js里查找identifier的attrName属性配置对象 修改它的options就可以达到注入我们的下拉值目的
    var lineConfig = api.getRightPanelItemListFromConstant({key:identifier,query:{"attrName":attrName}});
    for(var i=0;i<lineConfig.length;i++){
        lineConfig[i].options=option;//只要赋值一下options
    }
}
var myCallback = new MyCallback();
/*当页面初始化完成后 我们在左侧加一个示例配置 这一段也可以自己写死在constant.js里*/
MagicalCallback.prototype.after_start = function(param){
    var helper = "注意after_start执行到了my-callback-echarts.js了,我是示例,您可以把我从index-xxx.html中删除";
    layer.msg(helper)
    console.log(helper)


    
    var api = param.api;
    var constant = api.getConstant();
    //增加属性配置
    var configs = [
        {type:constant.type.SELECT,clearAttr:true       ,oneLine:true,change:constant.change.ATTR,attrName:'mc-attr-unknown-x',title:'X轴',tooltip:"",options:[]},
        {type:constant.type.SELECT,clearAttr:true       ,oneLine:true,change:constant.change.ATTR,attrName:'mc-attr-unknown-y',title:'Y轴',tooltip:"",options:[]},
    ]
    var content = constant.getRightPanel()[0].content;
    for(var identifier in myCallback.xyConfig){
        var item = myCallback.xyConfig[identifier];
        //添加x y 配置
        content[identifier].splice(1, 0, configs[0],configs[1]);
        //我们为线性图 构造数据源下拉配置
        myCallback.buildEchartsRemoteApi(item.remoteApi,identifier,api);
    }
    for(identifier in myCallback.scatter){
        var item = myCallback.scatter[identifier];
        myCallback.buildEchartsRemoteApi(item.remoteApi,identifier,api);
    }
    api.refreshAll();
}

MagicalCallback.prototype.pre_build_attrs = function (param) {
    var focusNode = param.focusNode;
    var identifier = focusNode.magicalCoder.identifier;
    if( myCallback.xyConfig[identifier]){
        var mcAttrUnknownApi = focusNode.attributes['mc-attr-unknown-api'];
        if(mcAttrUnknownApi){
            var fields = API_CACHE[mcAttrUnknownApi];
            if(fields){
                myCallback.setXYOption(identifier,fields.x,"mc-attr-unknown-x");
                myCallback.setXYOption(identifier,fields.y,"mc-attr-unknown-y");
            }else {
                myCallback.setXYOption(identifier,[],"mc-attr-unknown-x");
                myCallback.setXYOption(identifier,[],"mc-attr-unknown-y");
            }
        }
    }
    //这就是异步通知继续渲染属性
    param.notifyContinueCallback();
}
//当变更api时，应该把已配置的x y清除，优化一下 避免重复请求重绘
MagicalCallback.prototype.before_change_attr_callback = function (param) {
    var node = param.node;
    var identifier = node.magicalCoder.identifier;
    if(myCallback.xyConfig[identifier]){
        if(param.name == 'mc-attr-unknown-api'){
            var value = param.value;
            if(value !== param.originValue){
                param.node.attributes['mc-attr-unknown-x']="";
                param.node.attributes['mc-attr-unknown-y']="";
            }
        }
    }
    return true;
}

/**
 * 右侧属性配置属性变更后的回调事件 变更非文本
 */
MagicalCallback.prototype.after_change_attr_callback = function (param) {
    var node = param.node;
    var identifier = node.magicalCoder.identifier;
    if(myCallback.xyConfig[identifier]){
        if(param.name == 'mc-attr-unknown-api'){
            var api = new MagicalApi();
            var value = param.value;
            if(value !== param.originValue){
                param.node.attributes['mc-attr-unknown-x']="";
                param.node.attributes['mc-attr-unknown-y']="";
            }
            var fields = API_CACHE[value];
            if(fields){
                myCallback.setXYOption(identifier,fields.x,"mc-attr-unknown-x");
                myCallback.setXYOption(identifier,fields.y,"mc-attr-unknown-y");
            }else {
                myCallback.setXYOption(identifier,[],"mc-attr-unknown-x");
                myCallback.setXYOption(identifier,[],"mc-attr-unknown-y");
            }
            //一定要刷新一下当前结构
            api.refreshRightAttrPane({id:param.node.magicalCoder.id});
            api.onlyCenterRefreshHtml();
        }
    }
}
